body
  background: #222
  color: #fff
  box-sizing: border-box
  margin: 30px
  font-size: 12px
  line-height: 1.35
  font-family: Roboto, Helvetica, sans-serif
  font-weight: 300

*
  margin: 0
  padding: 0

h1, h2
  font-weight: 100

h1
  font-size: 300%

.hint
  color: #ffcc00


ul, li
  list-style: none

a
  color: inherit


.gamepad-list

  .gamepad
    margin: 30px 0
    position: relative

  .icon
    color: #ffcc00

  h2
    &.active
      color: #fff

    &.inactive
      color: #666

  label
    width: 20px
    font-size: 100%
    color: #aaa

  .value
    display: block
    text-align: right
    font-size: 150%
    margin-top: 3px

    overflow: hidden
    white-space: nowrap

  .info, .axes, .buttons
    margin: 5px 0

  .info, .buttons, .axes
    li
      display: inline-block
      padding: 3px
      margin: 0 5px 5px 0
      background: #333
      line-height: 1
      opacity: 0.3

      &.test-button
        cursor pointer
        background #644

        &:hover
          opacity 1

  .info li
    width: 50px

    &.med
      width: 100px

    &.large
      width: 200px

  .axes li
    width: 100px

  .buttons li
    width: 35px

.faq
  margin-top: 100px

  h2
    color: #888
    font-size: 200%

  .question
    margin: 10px 0

  .answer
    color: #888
    margin: 10px 20px

  li
    list-style: disc
    margin-left: 20px
